<template>
	<view>
		<view class="foot_box">
			<u-search search-icon="" placeholder="日照香炉生紫烟" v-model="keyword" style="width: 90%;" :animation="true"
				:show-action="false"></u-search>
			<u-button type="warning" size="medium" shape="circle">评 价</u-button>
		</view>
		<view class="video_box">
			<view><video id="myVideo" :src="dataObj.url" :initial-time="0"></video></view>
			<view class="video_title">{{dataObj.title}}</view>
			<view class="video_info">
				<view>{{dataObj.num}}次播放</view>
				<view>{{dataObj.time}}</view>
			</view>
			<u-tabs-swiper active-color="#FF8B00" bg-color="#F7F7F7" inactive-color="#1A1A1A" ref="tabs" :list="list"
				:is-scroll="false" @change="tabsChange" :current="current"></u-tabs-swiper>
		</view>
		<view style="height: 654rpx;"></view>
		<view class="content">
			<view class="tab_content">
				<view v-if="current===0">
					{{dataObj.jianjie}}
				</view>
				<view v-if="current===1">
					<recursive-collapse :item-list="treeData" />
				</view>
				<view v-if="current===2">
					<view class="pj_box" v-for="(item,index) in dataObj.pjList" :key="index">
						<view class="box_top">
							<view class="top_lf"><u-avatar :src="item.url" style="margin-right: 12rpx;"></u-avatar>
								{{item.name}}</view>
							<view class="top_lf">{{item.num}}</view>
						</view>
						<view class="box_text">{{item.text}}</view>
						<view class="box_img">
							<view class="imgl" v-for="(item,eindex) in item.imgList" :key="eindex">
								<u-image height="146rpx" :src="item"></u-image>
							</view>
						</view>
						<view class="box_time">{{item.time}}</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 140rpx;">

		</view>
	</view>
</template>

<script>
	import RecursiveCollapse from '@/components/recursive-collapse.vue'
	export default {
		data() {
			return {
				keyword: '',
				dataObj: {
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4',
					title: '学会双手拿不同的毛巾，感受不同的触感',
					num: 380,
					time: '2024-03-03',
					jianjie: '在幼儿数学教育中，幼儿教师应尽可能地扩大自己的视野，将数学教育内容渗透到生活情境中，将数学知识和生活情境相匹配。史月杰杰以“幼儿上下楼梯时”为例讲解如何将幼儿数学教学渗透在生活情境。',
					pjList: [{
						titleImg: '',
						name: '张宇轩',
						num: 39,
						text: '视频讲解的很仔细，我家孩子一下子就学会了。',
						imgList: ['', '', ''],
						time: '2023-03-12',
						status: '0'
					}, {
						titleImg: '',
						name: '张宇轩',
						num: 39,
						text: '视频讲解的很仔细，我家孩子一下子就学会了。',
						imgList: ['', '', ''],
						time: '2023-03-12',
						status: '1'
					}, {
						titleImg: '',
						name: '张宇轩',
						num: 39,
						text: '视频讲解的很仔细，我家孩子一下子就学会了。',
						imgList: ['', '', ''],
						time: '2023-03-12',
						status: '0'
					}]
				},
				treeData: [{
						id: '1',
						head: "赏识在于角度的转换",
						body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
						children: [{
								id: '11',
								head: "子节点1-1",
								body: "这是子节点1-1的内容",
								children: []
							},
							{
								id: '12',
								head: "子节点1-2",
								body: "这是子节点1-2的内容",
								children: []
							}
						]
					},
					{
						id: '2',
						head: "生活中不是缺少美，而是缺少发现美的眼睛",
						body: "学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的的美",
						children: [{
							id: '21',
							head: "子节点2-1",
							body: "这是子节点2-1的内容",
							children: []
						}]
					},
					{
						id: '3',
						head: "周围一些不起眼的人、事、物，或许都隐藏着不同凡响的智慧",
						body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
						children: []
					}
				],
				current: 0,
				list: [{
					name: '课程简介'
				}, {
					name: '课程目录'
				}, {
					name: '课程评价',
					// count: 5
				}],
			}
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.current = index;
			},
		},
		components: {
			RecursiveCollapse
		},
	}
</script>

<style lang="scss" scoped>
	#myVideo {
		width: 100%;
	}

	::v-deep .u-action {}

	.pj_box {
		padding: 10rpx 30rpx;
		border-bottom: 2rpx solid #F2F3F5;

		.box_top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.top_lf {
				display: flex;
				align-items: center;

			}
		}

		.box_text {
			font-size: 28rpx;
			color: #1A1A1A;
		}

		.box_img {
			display: flex;
			flex-wrap: wrap;

			.imgl {
				flex: 1;
				margin: 10rpx;
			}
		}

		.box_time {
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			padding: 20rpx 0rpx;
		}
	}

	.tab_content {
		width: 90%;
		background-color: #fff;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin: 8rpx 40rpx;
		box-sizing: border-box;
		padding: 30rpx 28rpx;
		line-height: 48rpx;
	}

	.foot_box {
		position: fixed;
		bottom: 0;
		z-index: 99999;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 30rpx;
	}

	.video_box {
		position: fixed;
		top: 0;
		z-index: 99999;
		width: 100%;
		background-color: #fff;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);


		.video_title {
			color: #1A1A1A;
			font-size: 28rpx;
			line-height: 33rpx;
			padding: 28rpx;
		}



		.video_info {
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			color: #999999;
			padding: 0rpx 28rpx;
			padding-bottom: 32rpx;
		}
	}
</style>